<template>
	<view>
		<view class="modal-mask" catchtouchmove="preventTouchMove" v-if="isShouq"></view>
		<view class="wxsq" v-if="isShouq">
			<view class="wine_logo">
				微信授权
			</view>
			<view class='info'>
				<view>申请获取以下权限</view>
				<text>获得你的公开信息(昵称，头像、地区等)</text>
			</view>
			<button size="mini" type="primary" class="sys_btn" @click="appLoginWx">
				微信登录授权
			</button>
		</view>


		<view class="modal-mask" catchtouchmove="preventTouchMove" v-if="isShow"></view>
		<view class="modal-dialog" v-if="isShow">
			<view class="modal-content">
				<view>绑定手机号</view>
				<view>为了方便取得联系，请绑定您的手机号码</view>
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					微信用户一键绑定
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			src: {
				type: String,
				default: 'wxlogin'
			},
			code: {
				type: String,
				default: 'code'
			},
		},

		data() {
			return {
				isShouq: true,
				isShow: false
			}
		},

		onLoad() {

		},
		methods: {
			appLoginWx() {
				this.isShouq = false
				uni.getUserProfile({
					desc: "weixin",
					success: res => {
						// 在这里进行请求
						console.log(res.userInfo);
						this.iv = res.iv;
						this.encryptedData = res.encryptedData;
						this.baseInfo = res.userInfo;
						console.log(this.code);
						uni.request({
							url: this.websiteUrl() + "User/xcx_login",
							methods: "get",
							data: {
								iv: this.iv,
								encrypt_data: this.encryptedData,
								userInfo: this.baseInfo,
								code: this.code
							},
							header: {
								'content-type': 'application/json'
							},
							success: res => {
								if (res.data.code == 0) {
									console.log("login: " + res.data.data);
									uni.setStorageSync("access_token", res.data.data)
									this.checkMobile()

								} else {
									uni.showToast({
										title: res.data.msg,
										icon: "none"
									})
								}
							}
						})
					},
					fail() {
						uni.showToast({
							title: "微信登录授权失败",
							icon: "none"
						})
					}
				})
			},
			getPhoneNumber: function(e) {
				this.isShow = false
				var commonUrl = this.websiteUrl()
				uni.login({
					success: function(res) {
						// 获取code    
						var code = res.code;

						if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
							uni.navigateBack({
								delta: 1
							})
						} else {
							var encryptedData = e.detail.encryptedData;
							var iv = e.detail.iv;
							var acctoken = uni.getStorageSync("access_token");
							uni.request({
								url: commonUrl + "User/bind_phone",
								data: {
									iv: iv,
									encrypt_data: encryptedData,
									code: code,
									access_token: acctoken
								},
								method: 'POST',
								header: {
									'content-type': 'application/json'
								},
								success: res => {
									console.log(res);
									if (res.data.code == 0) {
										uni.showToast({
											title: '绑定成功',
											icon: "success"
										});
									}
								}
							})

						}
					}
				});


			},
			checkMobile() {
				uni.request({
					url: this.websiteUrl() + 'User/CheckMobile',
					data: {
						access_token: uni.getStorageSync("access_token")
					},
					header: {
						'content-type': 'application/json'
					},
					method: 'POST',
					success: (res) => {
						if (res.data.code == -1) {
							this.isShow = true
						} else {
							uni.showToast({
								title: '登录成功',
								icon: "success"
							});
						}

					}
				});
			}
		}

	}
</script>

<style lang="scss">
	.wxsq {
		width: 72%;
		position: absolute;
		top: 30%;
		left: 14%;
		background: #fff;
		border-radius: 12rpx;
		z-index: 999;
		padding: 30rpx 0 50rpx;

		.wine_logo {
			font-size: 34rpx;
			text-align: center;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #eee;
			margin-bottom: 40rpx;
			font-weight: bold;
		}

		button {
			display: flex;
			justify-content: center;
			width: 80%;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 34rpx;
			border-radius: 48rpx;
		}

		.info {
			width: 80%;
			margin: 0 auto 50rpx;

			text {
				display: block;
				color: #9d9d9d;
				margin-top: 20rpx;
			}
		}
	}

	/* ---弹窗css--- */
	.modal-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		overflow: hidden;
		color: #fff;
		z-index: 999;
	}

	.modal-dialog {
		width: 72%;
		position: absolute;
		top: 30%;
		left: 14%;
		background: #fff;
		border-radius: 12rpx;
		z-index: 999;
	}

	.modal-content {
		text-align: center;
	}

	.modal-content .show {
		width: 300rpx;
		height: 105rpx;
		display: block;
		margin: 50rpx auto 30rpx;
		z-index: 10000;
	}

	.iconWx {
		width: 52rpx;
		height: 41rpx;
		padding-right: 20rpx;
	}

	.iconPhone {
		width: 56rpx;
		height: 56rpx;
		padding-right: 15rpx;
	}

	.modal-content view:nth-of-type(1) {
		margin-top: 80rpx;
		font-size: 38rpx;
		color: #333333;
		line-height: 1;
	}

	.modal-content view:nth-of-type(2) {
		font-size: 26rpx;
		color: #9c9c9c;
		margin: 18rpx 0 29rpx;
		line-height: 1;
	}

	.modal-content button:nth-of-type(1) {
		width: 80%;
		height: 80rpx;
		border-radius: 60rpx;
		margin: 0 auto 80rpx;
		font-size: 30rpx;
		color: #fff;
		background: #31cc32;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 0;
		box-sizing: border-box;
	}

	.modal-content button:nth-of-type(1)::after {
		border: none;
	}

	.modal-content .wxLogin {
		font-size: 26rpx;
		color: #424242;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin: 38rpx 0 80rpx;
	}
</style>
